<template>
	<el-input v-model="color" placeholder="请输入或选择颜色" clearable>
		<template #append>
			<el-color-picker v-model="color" />
		</template>
	</el-input>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
const props = defineProps<{
	modelValue: any;
}>();
const update = ref(false);
const color = ref('');
watch(
	() => props.modelValue,
	(val) => {
        if (update.value) {   
            return;
        }
		color.value = val;
	},
	{
		immediate: true,
	}
);
const $emit = defineEmits(['update:modelValue']);
watch(
    () => color.value,
    (val) => {
        update.value = true;
        $emit('update:modelValue', val);
		update.value = false;  
    }
);
</script>
<style lang="scss" scoped>
::v-deep {
	.el-input-group__append {
		background-color: #fff;
		border: none;
		padding: 0;
	}
	.el-color-picker__trigger {
		width: 50px;
		padding: 1px;
	}
}
</style>
